<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 6 Interactivity</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
#help{
position: absolute;
z-index: 20;
color: black;
top: 20px;
left: 120px;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
// the second parameter is interactivity...
var interactive = true;
var stage = new PIXI.Stage(0x000000, interactive);
// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create a background..
var background = PIXI.Sprite.fromImage("button_test_BG.jpg");
// add background to stage...
stage.addChild(background);
// create some textures from an image path
var textureButton = PIXI.Texture.fromImage("button.png");
var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");
var buttons = [];
var buttonPositions = [175,75,
600-145, 75,
600/2 - 20, 400/2 + 10,
175, 400-75,
600-115, 400-95];
for (var i=0; i < 5; i++)
{
var button = new PIXI.Sprite(textureButton);
button.buttonMode = true;
button.anchor.x = 0.5;
button.anchor.y = 0.5;
button.position.x = buttonPositions[i*2];
button.position.y = buttonPositions[i*2 + 1];
// make the button interactive..
button.interactive = true;
// set the mousedown and touchstart callback..
button.mousedown = button.touchstart = function(data) {
this.isdown = true;
this.setTexture(textureButtonDown);
this.alpha = 1;
};
// set the mouseup and touchend callback..
button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data) {
this.isdown = false;
if (this.isOver)
{
this.setTexture(textureButtonOver);
}
else
{
this.setTexture(textureButton);
}
};
// set the mouseover callback..
button.mouseover = function(data) {
this.isOver = true;
if (this.isdown)
return;
this.setTexture(textureButtonOver);
};
// set the mouseout callback..
button.mouseout = function(data) {
this.isOver = false;
if (this.isdown)
return
this.setTexture(textureButton)
};
button.click = function(data) {
console.log("CLICK!");
};
button.tap = function(data) {
console.log("TAP!!");
};
// add it to the stage
stage.addChild(button);
// add button to array
buttons.push(button);
};
// set some silly values...
buttons[0].scale.x = 1.2;
buttons[1].scale.y = 1.2;
buttons[2].rotation = Math.PI / 10;
buttons[3].scale.x = 0.8;
buttons[3].scale.y = 0.8;
buttons[4].scale.x = 0.8;
buttons[4].scale.y = 1.2;
buttons[4].rotation = Math.PI;
function animate() {
// render the stage
renderer.render(stage);
requestAnimFrame(animate);
}
// add a logo!
var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
stage.addChild(pixiLogo);
pixiLogo.buttonMode = true;
pixiLogo.position.x = 620 - 56;
pixiLogo.position.y = 400 - 32;
pixiLogo.click = pixiLogo.tap = function() {
window.open("http://www.pixijs.com", '_blank');
};
</script>
</body>
</html>
